/**
 * @author nttdocomo
 */
define(function(require) {
	require("../../aries");
	require("./trigger");
	require("../../button/button");
	require("../../dom/helper");
	aries.klass("aries.form.field.File", aries.form.field.Trigger.extend({

		/**
		 * @cfg {String} buttonText
		 * The button text to display on the upload button. Note that if you supply a value for
		 * {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.
		 */
		//<locale>
		buttonText : 'Browse...',

		/**
		 * @cfg {String} [fieldBodyCls='x-form-file-wrap']
		 * An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
		 */
		fieldBodyCls : aries.baseCSSPrefix + 'form-file-wrap',

		/**
		 * Gets the markup to be inserted into the subTplMarkup.
		 */
		getTriggerMarkup : function() {
			var me = this, result, btn = new aries.button.Button($.extend({
				id : this.cid + '-buttonEl',
				ui : this.ui,
				disabled : this.disabled,
				text : this.buttonText,
				cls : aries.baseCSSPrefix + 'form-file-btn',
				preventDefault : false,
				style : this.buttonOnly ? '' : 'margin-left:' + this.buttonMargin + 'px'
			}, this.buttonConfig)), btnCfg = btn.getRenderTree(), inputElCfg = {
				cls : aries.baseCSSPrefix + 'form-file-input',
				tag : 'input',
				attributes : {
					id : this.id + '-fileInputEl',
					type : 'file',
					size : 1
				}
			};
			if (this.disabled) {
				inputElCfg.disabled = true;
			}
			result = $('<td id="' + this.cid + '-browseButtonWrap"></td>');
			btn.renderEl(result);
			btn.$el.append(aries.dom.Helper.createDom(inputElCfg));
			return $("<div/>").append(result).html();
			//return result;
		}
	}));
})
